<template>
    <div class="budgetTabelPagePage">
        <div class="search-wrap d-flex a-center">
            <div class="search-item d-flex a-center">
                <label>部门</label>
                <el-select v-model="form.departmentId" class="m-l5" placeholder="请选择部门" clearable>
                    <el-option v-for="(item,index) in departmentList" :key="index" :label="item.deptName" :value="item.deptId"></el-option>
                </el-select>
            </div>
            <div class="search-item d-flex a-center m-l20">
                <label>项目名称</label>
                <el-select v-model="form.projectId" class="m-l5" placeholder="请选择项目" clearable>
                    <el-option v-for="(item,index) in projectList" :key="index" :label="item.projectName" :value="item.projectId"></el-option>
                </el-select>
            </div>
            <div class="search-item d-flex a-center m-l20">
                <label>年度</label>
                <el-date-picker
                        class="m-l10"
                        clearable
                        v-model="form.year"
                        value-format="YYYY"
                        size="large"
                        type="year"
                        placeholder="请选择"
                />
            </div>
            <div class="search-item d-flex a-center m-l20">
                <label>季度</label>
                <el-select class="m-l10" v-model="form.quarter" clearable>
                    <el-option label="第一季度" value="1"></el-option>
                    <el-option label="第二季度" value="2"></el-option>
                    <el-option label="第三季度" value="3"></el-option>
                    <el-option label="第四季度" value="4"></el-option>
                </el-select>
            </div>
            <div class="search-buttons m-l50 d-flex a-center">
                <el-button
                        color="#fc702b"
                        style="color:#fff;"
                        @click.prevent="onQuery"
                >查询</el-button>
                <el-button
                        color="#f0f0f0"
                        style="color: #000000"
                        @click.prevent="onReset"
                >重置</el-button>
            </div>
        </div>
        <div class="search-buttons m-t20">
            <el-button
                    v-permission
                    class="button_edit"
                    @click="predictionVisible = true"
            >
                新增预测
            </el-button>
            <el-button
                    v-permission
                    class="button_edit"
                    @click="visible = true"
            >
                新增预算
            </el-button>
            <el-button
                    v-permission
                    class="button_edit"
                    @click="toBudgetAccount"
            >
                新增预算科目
            </el-button>
            <el-button
                    v-permission
                    class="button_edit"
                    @click="onEdit"
            >
                编辑
            </el-button>
            <el-button
                    v-permission
                    class="button_edit"
                    @click="onExport"
            >
                <svg-icon icon-class="project-detail-icon-derive" class="icon-export m-r5"></svg-icon>
                一键导出
            </el-button>
        </div>
        <public-table
                index
                :indexWidth="'100'"
                :page="page"
                :tableData="tableData"
                :tableOption.sync="tableOption"
                @page-change="onPageChange"
                @handleSelectionChange="handleSelectionChange"
        >
        </public-table>
    </div>

    <!-- 新增预测   -->
    <public-dialog
            :title="'新增预测'"
            :width="'70%'"
            v-model:visible="predictionVisible"
            @onConfirm="onPredictionConfirm"
    >
        <div class="public-dialog-content d-flex flex-column">
            <el-form
                :model="predictionForm"
                :rules="predictionRules"
                :inline="true"
                ref="predictionFormRef1"
            >
                <el-form-item label="编制部门" prop="departmentId">
                    <el-select class="m-l5" placeholder="请选择部门" v-model="predictionForm.departmentId" clearable>
                        <el-option v-for="(item,index) in departmentList" :key="index" :label="item.deptName" :value="item.deptId"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="相关主项目" prop="projectId">
                    <el-select class="m-l5" placeholder="请选择项目" v-model="predictionForm.projectId" clearable>
                        <el-option v-for="(item,index) in projectList" :key="index" :label="item.projectName" :value="item.projectId"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="年度" prop="year">
                    <el-date-picker
                        class="m-l10"
                        clearable
                        v-model="predictionForm.year"
                        value-format="YYYY"
                        size="large"
                        type="year"
                        placeholder="请选择"
                    />
                </el-form-item>
                <el-form-item label="季度" prop="quarter">
                    <el-select class="m-l10" v-model="predictionForm.quarter" clearable>
                        <el-option label="第一季度" value="1"></el-option>
                        <el-option label="第二季度" value="2"></el-option>
                        <el-option label="第三季度" value="3"></el-option>
                        <el-option label="第四季度" value="4"></el-option>
                    </el-select>
                </el-form-item>
            <div class="details-box m-t30 d-flex j-sb" style="width: 100%;">
                <span>预算科目明细</span>
                <div class="buttons-box" v-show="false"></div>
            </div>
                <el-row class="m-b10 m-t10" style="width: 100%;">
                    <el-col :span="12" class="p-l50">
                        <span style="font-weight: 600;font-size: 15px;">预算科目</span>
                    </el-col>
                    <el-col :span="12">
                        <span style="font-weight: 600;font-size: 15px;">预算金额</span>
                    </el-col>
                </el-row>
                <el-divider style="margin: 0 !important;"/>
                <el-row class="m-t10" style="width: 100%;">
                    <el-col :span="12" class="p-l50">
                        <el-input disabled placeholder="成本" style="width: 60%"> </el-input>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item class="form-item m-20" prop="cost">
                            <el-input
                                v-model="predictionForm.cost"
                                placeholder="请输入预算金额"
                                @input="predictionForm.cost = limitInputNum(predictionForm.cost,7,4,0)"
                            > </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-divider style="margin: 0 !important;"/>
                <el-row class="m-t10" style="width: 100%;">
                    <el-col :span="12" class="p-l50">
                        <el-input disabled placeholder="收入" style="width: 60%"> </el-input>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item class="form-item m-b20" prop="income">
                            <el-input
                                v-model="predictionForm.income"
                                placeholder="请输入预算金额"
                                @input="predictionForm.income = limitInputNum(predictionForm.income,7,4,0)"
                            > </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-divider style="margin: 0 !important;"/>
                <el-row class="m-t10" style="width: 100%;">
                    <el-col :span="12" class="p-l50">
                        <el-input disabled placeholder="费用" style="width: 60%"> </el-input>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item class="form-item m-b20" prop="fee">
                            <el-input
                                v-model="predictionForm.fee"
                                placeholder="请输入预算金额"
                                @input="predictionForm.fee = limitInputNum(predictionForm.fee,7,4,0)"
                            > </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-divider style="margin: 0 !important;"/>
                <el-row class="m-t10" style="width: 100%;">
                    <el-col :span="12" class="p-l50">
                        <el-input disabled placeholder="收益" style="width: 60%"> </el-input>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item class="form-item m-b20" prop="profit">
                            <el-input
                                v-model="predictionForm.profit"
                                placeholder="请输入预算金额"
                                @input="predictionForm.profit = limitInputNum(predictionForm.profit,7,4,0)"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-divider style="margin: 0 !important;"/>
            </el-form>
        </div>
    </public-dialog>

    <!-- 新增预算   -->
    <public-dialog
        :title="'新增预算'"
        :width="'70%'"
        v-model:visible="visible"
        @onConfirm="onConfirm"
    >
        <div class="public-dialog-content d-flex flex-column">
            <el-form
                :model="budgetForm"
                :rules="predictionRules"
                :inline="true"
                ref="budgetFormRef1"
            >
                <el-form-item label="编制部门" prop="departmentId">
                    <el-select class="m-l5" placeholder="请选择部门" v-model="budgetForm.departmentId" clearable>
                        <el-option v-for="(item,index) in departmentList" :key="index" :label="item.deptName" :value="item.deptId"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="相关主项目" prop="projectId">
                    <el-select class="m-l5" placeholder="请选择项目" v-model="budgetForm.projectId" clearable>
                        <el-option v-for="(item,index) in projectList" :key="index" :label="item.projectName" :value="item.projectId"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="年度" prop="year">
                    <el-date-picker
                        class="m-l10"
                        clearable
                        v-model="budgetForm.year"
                        value-format="YYYY"
                        size="large"
                        type="year"
                        placeholder="请选择"
                    />
                </el-form-item>
                <el-form-item label="季度" prop="quarter">
                    <el-select class="m-l10" v-model="budgetForm.quarter" clearable>
                        <el-option label="第一季度" value="1"></el-option>
                        <el-option label="第二季度" value="2"></el-option>
                        <el-option label="第三季度" value="3"></el-option>
                        <el-option label="第四季度" value="4"></el-option>
                    </el-select>
                </el-form-item>
                <div class="details-box m-t30 d-flex j-sb" style="width: 100%;">
                    <span>预算科目明细</span>
                    <div class="buttons-box" v-show="false"></div>
                </div>
                <el-row class="m-b10 m-t10" style="width: 100%;">
                    <el-col :span="12" class="p-l50">
                        <span style="font-weight: 600;font-size: 15px;">预算科目</span>
                    </el-col>
                    <el-col :span="12">
                        <span style="font-weight: 600;font-size: 15px;">预算金额</span>
                    </el-col>
                </el-row>
                <el-divider style="margin: 0 !important;"/>
                <el-row class="m-t10" style="width: 100%;">
                    <el-col :span="12" class="p-l50">
                        <el-input disabled placeholder="成本" style="width: 60%"> </el-input>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item class="form-item m-20" prop="cost">
                            <el-input
                                v-model="budgetForm.cost"
                                placeholder="请输入预算金额"
                                @input="budgetForm.cost = limitInputNum(budgetForm.cost,7,4,0)"
                            > </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-divider style="margin: 0 !important;"/>
                <el-row class="m-t10" style="width: 100%;">
                    <el-col :span="12" class="p-l50">
                        <el-input disabled placeholder="收入" style="width: 60%"> </el-input>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item class="form-item m-b20" prop="income">
                            <el-input
                                v-model="budgetForm.income"
                                placeholder="请输入预算金额"
                                @input="budgetForm.income = limitInputNum(budgetForm.income,7,4,0)"
                            > </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-divider style="margin: 0 !important;"/>
                <el-row class="m-t10" style="width: 100%;">
                    <el-col :span="12" class="p-l50">
                        <el-input disabled placeholder="费用" style="width: 60%"> </el-input>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item class="form-item m-b20" prop="fee">
                            <el-input
                                v-model="budgetForm.fee"
                                placeholder="请输入预算金额"
                                @input="budgetForm.fee = limitInputNum(budgetForm.fee,7,4,0)"
                            > </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-divider style="margin: 0 !important;"/>
                <el-row class="m-t10" style="width: 100%;">
                    <el-col :span="12" class="p-l50">
                        <el-input disabled placeholder="收益" style="width: 60%"> </el-input>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item class="form-item m-b20" prop="profit">
                            <el-input
                                v-model="budgetForm.profit"
                                placeholder="请输入预算金额"
                                @input="budgetForm.profit = limitInputNum(budgetForm.profit,7,4,0)"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-divider style="margin: 0 !important;"/>
            </el-form>
        </div>
    </public-dialog>
    <!--    <public-dialog
            :title="'新增预算'"
            :width="'70%'"
            v-model:visible="visible"
            @onConfirm="onConfirm"
    >
        <div class="public-dialog-content d-flex flex-column">
            <el-form
                :model="budgetForm"
                :rules="budgetRules"
                :inline="true"
                ref="budgetFormRef1"
            >
                <el-form-item label="编制部门" prop="departmentId">
                    <el-select class="m-l5" placeholder="请选择部门" v-model="budgetForm.departmentId" clearable>
                        <el-option v-for="(item,index) in departmentList" :key="index" :label="item.deptName" :value="item.deptId"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="相关主项目" prop="projectId">
                    <el-select class="m-l5" placeholder="请选择项目" v-model="budgetForm.projectId" clearable>
                        <el-option v-for="(item,index) in projectList" :key="index" :label="item.projectName" :value="item.projectId"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="年度" prop="year">
                    <el-date-picker
                        class="m-l10"
                        clearable
                        v-model="budgetForm.year"
                        value-format="YYYY"
                        size="large"
                        type="year"
                        placeholder="请选择"
                    />
                </el-form-item>
                <el-form-item label="季度" prop="quarter">
                    <el-select class="m-l10" v-model="budgetForm.quarter" clearable>
                        <el-option label="第一季度" value="1"></el-option>
                        <el-option label="第二季度" value="2"></el-option>
                        <el-option label="第三季度" value="3"></el-option>
                        <el-option label="第四季度" value="4"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div class="details-box m-t30 d-flex j-sb">
                <span>预算科目明细</span>
                <div class="buttons-box">
                    <svg-icon
                        icon-class="businessFinance-jia"
                        class="icon"
                        @click="addHandle"
                    />
                    <svg-icon
                        icon-class="businessFinance-jian"
                        class="icon m-l10"
                        @click="reduceHandle"
                    />
                </div>
            </div>
            <el-form
                :model="budgetForm"
                ref="budgetFormRef2"
            >
                <el-table
                    :data="budgetForm.list"
                    @selection-change="budgetHandleSelectionChange"
                >
                    <el-table-column type="selection"></el-table-column>
                    <el-table-column type="index" label="序号" width="100px"></el-table-column>
                    <el-table-column label="预算科目" prop="budgetSubjectId">
                        <template #default="scope">
                            <el-form-item
                                :prop="'list.'+scope.$index+'.budgetSubjectId'"
                                :rules="budgetRules.budgetSubjectId"
                                class="m-b0"
                            >
                                <el-cascader :show-all-levels="false" v-model="scope.row.budgetSubjectId" :props="props" />
                            </el-form-item>
                        </template>
                    </el-table-column>
                    <el-table-column label="预算金额" prop="budgetAmount">
                        <template #default="scope">
                            <el-form-item
                                :prop="'list.'+scope.$index+'.budgetAmount'"
                                :rules="budgetRules.budgetAmount"
                                class="m-b0"
                            >
                                <el-input v-model="scope.row.budgetAmount" placeholder="请输入预算金额"/>
                            </el-form-item>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form>
        </div>
    </public-dialog>-->
</template>

<script setup>
import {budgetManagement, exportApi, fundManagementApi} from "@/api/businessFinance";
import {onMounted, reactive, ref} from "vue";
import {
    ElSelect,
    ElOption,
    ElDatePicker,
    ElForm,
    ElFormItem,
    ElTable,
    ElTableColumn,
    ElCascader,
    ElMessage,
    ElRow,
    ElCol,
    ElDivider
} from "element-plus";
import PublicTable from "@/components/PublicTable.vue";
import {exportExcelFile, limitInputNum, resetForm} from "@/common/utils/GlobalUtils";
import PublicDialog from "@/components/PublicDialog.vue";
import {useRouter} from "vue-router";

const page = reactive({
    total: 0,
    current: 1,
    size: 10
});

const tableData = ref([]);

const tableOption = ref([
    { label: "部门名称", prop: "departmentName", minWidth: 100 },
    { label: "项目名称 ", prop: "projectName", minWidth: 100 },
    { label: "年度 ", prop: "year", minWidth: 80 },
    { label: "季度 ", prop: "quarter", minWidth: 80 },
    { label: "成本总金额 ", prop: "cost", minWidth: 100 },
    { label: "收入总金额 ", prop: "income", minWidth: 100 },
    { label: "费用总金额 ", prop: "fee", minWidth: 100 },
    { label: "收益总金额 ", prop: "profit", minWidth: 100 },
    { label: "利润总金额 ", prop: "earnings", minWidth: 100 },
    { label: "实际成本总金额 ", prop: "realityCost", minWidth: 130 },
    { label: "实际收入总金额 ", prop: "realityIncome", minWidth: 130 },
    { label: "实际费用总金额 ", prop: "realityFee", minWidth: 130 },
    { label: "实际收益总金额 ", prop: "realityProfit", minWidth: 130 },
    { label: "实际利润总金额 ", prop: "realityEarnings", minWidth: 130 },
	{ label: "成本达成率 ", prop: "costRate", minWidth: 100 },
	{ label: "收入达成率 ", prop: "incomeRate", minWidth: 100 },
	{ label: "费用达成率 ", prop: "feeRate", minWidth: 100 },
    { label: "收益达成率 ", prop: "profitRate", minWidth: 100 },
]);

const form = reactive({
    departmentId:'',
    projectId:'',
    year:'',
    quarter:''
});

// 新增预算的form
const budgetForm = reactive({
    departmentId:'',
    projectId:'',
    year:'',
    quarter:'',
    cost:'',
    income:'',
    fee:'',
    profit:'',
    list:[]
});

const budgetRules = reactive({
    departmentId: [{ required: true, message: '部门,不能为空!', trigger: 'change' },],
    projectId: [{ required: true, message: '项目,不能为空!', trigger: 'change' },],
    year: [{ required: true, message: '年度,不能为空!', trigger: 'change' },],
    quarter: [{ required: true, message: '季度,不能为空!', trigger: 'change' },],
    budgetSubjectId: [{ required: true, message: '预算科目不能为空,不能为空!', trigger: 'change' },],
    budgetAmount:[
        { required: true, message: '预算金额,不能为空!', trigger: 'blur' },
    ],
});

const departmentList = ref([]);
const getDepartmentVo = () => {
    fundManagementApi.getDepartmentVo().then(res=>{
        departmentList.value = res.data;
    });
}

const projectList = ref([]);
const getProjectList = () => {
    budgetManagement.getProjectList().then(res=>{
        projectList.value = res.data;
    });
}

const getBudgetPredictionRecordVo = (param) => {
    budgetManagement.getBudgetPredictionRecordVo(param).then(res=>{
        tableData.value = res.data.content;
        page.total = res.data.totalSize;
    });
}

const onQuery = () => {
    page.current = 1;
    page.size = 10;
    let param = {
        param: {
            ...form
        },
        pageNum: page.current,
        pageSize: page.size
    };
    getBudgetPredictionRecordVo(param);
}

const onReset = () => {
    resetForm(form);
    page.current = 1;
    page.size = 10;
    let param = {
        pageNum: page.current,
        pageSize: page.size
    };
    getBudgetPredictionRecordVo(param);
}

const onPageChange = (e) => {
    page.current = e.page;
    page.size = e.limit;
    let param = {
        param: {
            ...form
        },
        pageNum: page.current,
        pageSize: page.size
    };
    getBudgetPredictionRecordVo(param);
}

const exportList = ref([]);
const handleSelectionChange = (e) => {
    exportList.value = e;
}

const onExport = () => {
    exportApi.getBudgetPredictionRecordLeadingOut(form).then(res=>{
        if(res){
            exportExcelFile(res,'预算管理表');
        }
    });
}

const visible = ref(false);
// 新增预算api
const addBudgetGatherRecord = (param) => {
    budgetManagement.addBudgetGatherRecord(param).then(res=>{
        if(res.code === '200'){
            visible.value = false;
            ElMessage.success('新增预算成功!');
            getBudgetPredictionRecordVo({
                pageNum: 1,
                pageSize: 10
            });
        }
    });
}

// 新增预算/确认新增预算
const budgetFormRef1 = ref(null);
const onConfirm = async () => {
    await budgetFormRef1.value.validate();
    addBudgetGatherRecord(budgetForm);
}

const budgetList = ref([]);
const budgetHandleSelectionChange = (e) => {
    budgetList.value = e;
}

const addHandle = () => {
  budgetForm.list.push({
      uuid:new Date().getTime(),
      budgetSubjectId:'',
      budgetAmount:''
  });
}

const reduceHandle = () => {
  if(budgetList.value.length===0){
      ElMessage.warning('请选择要操作的行!')
      return;
  }
  budgetList.value.forEach(item=>{
      budgetForm.list.forEach((val,index)=>{
          if(item.uuid === val.uuid){
              budgetForm.list.splice(index,1);
          }
      });
  });
}

const budgetSubjectTypeList = ref([]);
const getBudgetSubjectType = (type) => {
  return  budgetManagement.getBudgetSubjectType(type).then(res=>{
      if(res.code === '200'){
          budgetSubjectTypeList.value = res.data;
      }
  });
}

const props = {
    lazy: true,
    emitPath:false,
   async lazyLoad(node, resolve) {
        const { level } = node;
        try {
            if(level === 0){
                let nodes = [
                    {
                        value: 1,
                        label: '收入',
                        leaf: level >= 1,
                    },
                    {
                        value: 2,
                        label: '成本',
                        leaf: level >= 1,
                    },
                    {
                        value: 3,
                        label: '费用',
                        leaf: level >= 1,
                    },
                    {
                        value: 4,
                        label: '收益',
                        leaf: level >= 1,
                    },
                ];
                resolve(nodes);
            }
            if(level > 0 && level < 2){
                let nodes = [];
                await getBudgetSubjectType(node.value);
                budgetSubjectTypeList.value.forEach(item=>{
                    nodes.push({
                        value: item.subjectId,
                        label: item.subjectName,
                        leaf: level >= 1,
                    });
                });
                resolve(nodes);
            }
        }catch (e) {
           let nodes = [];
            resolve(nodes);
        }

    }
}

const predictionForm = reactive({
    departmentId:'',
    year: '',
    quarter: '',
    monthly: '',
    projectId:'',
    cost: '',
    income: '',
    fee: '',
    profit: '',
});


const predictionRules = reactive({
    departmentId: [{ required: true, message: '部门,不能为空!', trigger: 'change' },],
    year: [{ required: true, message: '年度,不能为空!', trigger: 'change' },],
    quarter: [{ required: true, message: '季度,不能为空!', trigger: 'change' },],
    monthly: [{ required: true, message: '月度,不能为空!', trigger: 'change' },],
    projectId: [{ required: true, message: '项目,不能为空!', trigger: 'change' },],
    cost: [{ required: true, message: '成本预算金额,不能为空!', trigger: 'change' },],
    income: [{ required: true, message: '收入预算金额,不能为空!', trigger: 'change' },],
    fee: [{ required: true, message: '费用预算金额,不能为空!', trigger: 'change' },],
    profit: [{ required: true, message: '收益预算金额,不能为空!', trigger: 'change' },],
});


// 新增预测
const predictionVisible = ref(false);
const addBudgetPredictionRecord = (param) => {
    budgetManagement.addBudgetPredictionRecord(param).then(res=>{
        if(res.code === '200'){
            predictionVisible.value = false;
            ElMessage.success('新增预测成功!');
            getBudgetPredictionRecordVo({
                pageNum: 1,
                pageSize: 10
            });
            page.current = 1;
            page.size = 10;
            resetForm(predictionForm);
            predictionFormRef1.value.resetFields();
        }
    });
}

const predictionFormRef1 = ref(null);
// 新增预测
const onPredictionConfirm =async () => {
    await predictionFormRef1.value.validate();
    addBudgetPredictionRecord(predictionForm);
}


const router = useRouter();

/**
 * 跳转预算科目页
 */
const toBudgetAccount = () => {
    router.push({path:`/businessFinance/fundManagement/subject/budgetAccount`});
}

/**
 * 跳转预算汇总表
 */
const onEdit = () => {
    router.push({path:`/businessFinance/fundManagement/budgetManagement/budgetSummary`});
}

onMounted(()=>{
    getDepartmentVo();
    getProjectList();
    getBudgetPredictionRecordVo({
        pageNum: 1,
        pageSize: 10
    });
});
</script>

<style lang="scss" scoped>
.form-item{
    width: 100% !important;
}

.budgetTabelPagePage{
  .search-wrap{
    .search-item{

      .el-input{
        width: auto !important;
      }
    }
    .search-buttons{
      .icon-export{
        width: 18px;
        height: 18px;
      }
    }
  }
}
.public-dialog-content{
    .details-box{
        span{
            font-size: 15px;
            font-weight: 600;
        }
        .buttons-box{
            .icon{
                cursor: pointer;
                width: 28px;
                height: 28px;
            }
        }
    }
}
</style>
